<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
		<!--<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />-->
		<!--离线应用的另一个技巧-->
		<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
		<meta content="yes" name="apple-mobile-web-app-status-bar-style" />
		<!--指定的iphone中safari顶端的状态条的样式-->
		<!--告诉设备忽略将页面中的数字识别为电话号码-->
		<meta content="telephone=no" name="format-detection" />
		<!--告诉设备忽略将页面中的数字识别为电话号码-->
		
		<link rel="stylesheet" type="text/css" href="css/frozen.css"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
	</head>
	<body>
	
		<header class="ui-header ui-header-stable ui-border-b">
		    <i class="ui-icon-return" onclick="history.back()"></i>
		    <h1>全部</h1>
		    <button class="ui-btn">首页</button>
		</header>
		
		<footer class="ui-footer ui-footer-stable ui-border-t">
		    <ul class="ui-tiled ui-footer-icon-wrap">
		        <!--<li><a href="#"><i class="ui-icon">&#xf606;</i><p>分类</p></a></li>-->
		        <li class="ui-border-l ui-badge-wrap">
		        	<a href="#">
		        		<div class="ui-tag-warp ui-flex-align-center">
				        	<i class="ui-icon">&#xf620;<!--<i class="ui-badge">30</i>--></i>
				        	<!--<span class="ui-tag">0</span>-->
				        	<i class="ui-badge">30</i>
		        		</div>
			        	<p>购物车</p>
		        	</a>
		        </li>
		        <li class="ui-border-l"><a href="#"><i class="ui-icon">&#xf61e;</i><p>个人中心</p></a></li>
		    </ul>
		</footer>
		
		<section class="ui-container">
			
			<div class="ui-searchbar-wrap ui-border-b">
			    <div class="ui-searchbar ui-border-radius">
			        <i class="ui-icon-search"></i>
			        <div class="ui-searchbar-text">搜索商品</div>
			        <div class="ui-searchbar-input"><input value="" type="text" placeholder="搜索商品" autocapitalize="off"></div>
			        <i class="ui-icon-close"></i>
			    </div>
			    <button class="ui-searchbar-cancel">取消</button>
			</div>
			
		    <div class="ui-row-flex ui-border-tb tc ui-pxui-tab">
			    <div class="ui-col ui-border-r selected">
			    	<a href="#" class="ui-tiled ui-flex-pack-center"><span>综合</span></a>
			    </div>
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>价格</span><i class="ui-icon">&#xf628;</i>
			    	</a>
			    </div>
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>销量</span>
			    		<i class="ui-icon">&#xf628;</i>
			    	</a>
			    </div>
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>最新</span>
			    		<i class="ui-icon">&#xf628;</i>
			    	</a>
			   	</div>
			    <div class="ui-col">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>折扣</span>
			    		<i class="ui-icon">&#xf628;</i>
			    	</a>
			    </div>
			</div>
			
			<ul class="ui-justify ui-pxui-goods ">
		        <li>
	        		<img class="ui-goods-img" src="http://placeholder.qiniudn.com/200x200"/>
		        	<p class="name ui-nowrap-multi">手工透气真皮 头层牛皮套脚 男商务正装皮鞋2103</p>
		        	<div class="price ui-tiled">
		        		<span>￥200</span>
		        		<del>$700</del>
		        	</div>
	        		<i class="ui-badge-wrap">
	        			<span>立奖30%</span>
	        			<i class="ui-badge-tag"></i>
	        		</i>
		        </li>
		        <li>
	        		<img class="ui-goods-img" src="http://placeholder.qiniudn.com/200x200"/>
		        	<p class="name ui-nowrap-multi">手工透气真皮 头层牛皮套脚 男商务正装皮鞋2103</p>
		        	<div class="price ui-tiled">
		        		<span>￥200</span>
		        		<del>$700</del>
		        		<i class="ui-badge">立奖30%</i>
		        	</div>
		        </li>
		        <li>
	        		<img class="ui-goods-img" src="http://placeholder.qiniudn.com/200x200"/>
		        	<p class="name ui-nowrap-multi">手工透气真皮 头层牛皮套脚 男商务正装皮鞋2103</p>
		        	<div class="price ui-tiled">
		        		<span>￥200</span>
		        		<del>$700</del>
		        		<i class="ui-badge">立奖30%</i>
		        	</div>
		        </li>
		        <li>
	        		<img class="ui-goods-img" src="http://placeholder.qiniudn.com/200x200"/>
		        	<p class="name ui-nowrap-multi">手工透气真皮 头层牛皮套脚 男商务正装皮鞋2103</p>
		        	<div class="price ui-tiled">
		        		<span>￥200</span>
		        		<del>$700</del>
		        		<i class="ui-badge">立奖30%</i>
		        	</div>
		        </li>
		    </ul>
		    
		    <div class="ui-copyright">
		    	<ul class="ui-tiled declare">
		    		<li>诚信商家</li>
		    		<li>15天无理由免邮退换货</li>
		    	</ul>
		    	<p class="info tc">© 2014-2016 kaieers All Rights Reserved</p>
		    </div>
			
		</section>
		
		<script src="js/lib/zeptojs/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/frozen.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		    $('.ui-searchbar').tap(function(){
		        $('.ui-searchbar-wrap').addClass('focus');
		        $('.ui-searchbar-input input').focus();
		    });
		    $('.ui-searchbar-cancel').tap(function(){
		        $('.ui-searchbar-wrap').removeClass('focus');
		    });
		</script>
	</body>
</html>
